<div layout="column" flex class="recipe-widget" md-theme="default">
  <ng-form name="workspaceRecipeImportForm">
    <div layout="column">
      <che-label-container che-label-name="Recipe URL">
        <div class="recipe-url-input">
          <che-input-box che-form="workspaceRecipeImportForm"
                         che-name="url"
                         che-place-holder="URL of the Recipe"
                         aria-label="URL of the Recipe"
                         pattern="^(ftp|https?)://[\w@.\-\_]+(:\d{1,5})?(/[\w#!:.?+=&%@!\_\-/]+)*$"
                         che-width="auto"
                         ng-model="workspaceRecipeImportCtrl.recipeUrlCopy"
                         che-on-change="workspaceRecipeImportCtrl.onRecipeChange()"
                         ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 200, 'blur': 0 }, allowInvalid: true }"
                         minlength="3"
                         ng-required
                         ng-maxlength="255">
            <che-error-messages che-message-scope="workspace-details-environment"
                                che-message-name="Recipe URL">
              <div ng-message></div>
              <div ng-message="required">URL is required.</div>
              <div ng-message="minlength">URL has to be more than 3 characters long.</div>
              <div ng-message="maxlength">URL has to be less than 255 characters long.</div>
              <div ng-message="pattern">URL is not valid.</div>
            </che-error-messages>
          </che-input-box>
        </div>
      </che-label-container>
      <che-label-container che-label-name="Recipe Type">
        <div layout="column">
          <che-toggle ng-model="workspaceRecipeImportCtrl.recipeFormatCopy"
                      ng-change="workspaceRecipeImportCtrl.onRecipeChange()"
                      class="recipe-format">
            <che-toggle-button che-title="compose"></che-toggle-button>
            <che-toggle-button che-title="dockerfile"></che-toggle-button>
          </che-toggle>
        </div>
      </che-label-container>
    </div>

  </ng-form>
</div>
